<template>
  <div>
    <el-divider content-position="left">就诊记录</el-divider>


    <div style="width: 100%;height: 360px;display: flex;justify-content: space-between;align-items: center">
      <div ref="chart" style="height: 360px;width: 50%" class="w-full h-fill"/>
<!--      <div style="height: 320px;width: 50%">-->
        <div ref="chart1" style="height: 360px;width: 50%" class="w-full h-fill"/>
<!--      </div>-->
    </div>


    <el-table size="small" :data="state.dataList" v-loading="state.loading" border
              :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
              @sort-change="sortChangeHandle">
      <el-table-column type="index" label="#" width="60"/>
      <el-table-column prop="doctorCode" label="医生工号" show-overflow-tooltip/>
      <el-table-column prop="doctorName" label="医生姓名" show-overflow-tooltip/>
      <el-table-column prop="visitDept" label="就诊科室" show-overflow-tooltip/>
      <el-table-column prop="customerName" label="患者姓名" show-overflow-tooltip/>
      <el-table-column prop="icCard" label="身份证号" show-overflow-tooltip/>
      <el-table-column prop="medicalCard" label="社保卡号" show-overflow-tooltip/>
      <el-table-column prop="visitTime" label="就诊时间" show-overflow-tooltip/>
      <el-table-column prop="visitEndTime" label="结束时间" show-overflow-tooltip/>
    </el-table>
    <pagination template-size="small" @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                v-bind="state.pagination"/>
  </div>
</template>
<script setup lang="ts">

import {BasicTableProps, useTable} from "/@/hooks/table";
import {fetchListRoom, getDeptDirectionPieChart, getDoctorDirectionPieChart} from "/@/api/life";
import * as echarts from 'echarts';
import {markRaw} from "vue";
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: fetchListRoom,
  createdIsNeed: false,
  descs: ['visit_time'],
})


const chart = ref(null);
const chart1 = ref(null);
const creatChart = ref(false)
const creatChart1 = ref(false)

const {
  tableStyle,
  getDataList,
  sortChangeHandle,
  currentChangeHandle,
  sizeChangeHandle,
} = useTable(state)

const dataList = ref([])
const dataList1 = ref([])

const setBloodChartsApi = async () => {
 await getDoctorDirectionPieChart({
    customerId: state.queryForm.customerId
 }).then((res) => {
    dataList.value = res.data
  })
}

const setBloodChartsApi1 = async () => {
  await getDeptDirectionPieChart({
    customerId: state.queryForm.customerId
  }).then((res) => {
    dataList1.value = res.data
  })
}

const getData = (val: any) => {
  if (val.medicalCard) {
    state.queryForm.medicalCard = val.medicalCard
  }
  if (val.icCard) {
    state.queryForm.icCard = val.icCard
  }
  if (state.queryForm.medicalCard || state.queryForm.icCard) {
    getDataList()
  }

  state.queryForm.customerId = val.id
  if (state.queryForm.customerId) {
    setBloodChartsApi().then(() => {
      setBloodCharts()
    })
    setBloodChartsApi1().then(() => {
      setBloodCharts1()
    })
  }

}

const clearData = () => {
  state.dataList = []
  dataList.value = []
  dataList1.value = []
  setBloodCharts()
  setBloodCharts1()
}

const setBloodCharts1 = () => {
  const option = {
    title: {
      text: '就诊科室流向',
      left: 'center',
      bottom: '10'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '就诊科室流向',
        type: 'pie',
        radius: '50%',
        data:dataList1.value,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label:{
          show: true,
          formatter: '{b} : {c} ({d}%)',
          position: 'outside',  // 标签显示在饼图外部
          fontSize: 16,  // 设置字体大小
        }
      }
    ]
  }

  setTimeout(() => {
    // 销毁之前的图表
    chart1.value = markRaw(echarts.init(chart1.value));
    chart1.value.setOption(option);
    creatChart1.value = true
  }, 100);
}

const setBloodCharts = () => {
  const option = {
    title: {
      text: '专病门诊医生就诊流向',
      left: 'center',
      bottom: '10'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '就诊流向',
        type: 'pie',
        radius: '50%',
        data:dataList.value,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label:{
          show: true,
          formatter: '{b} : {c} ({d}%)',
          position: 'outside',  // 标签显示在饼图外部
          fontSize: 16,  // 设置字体大小
        }
      }
    ]
  }

  setTimeout(() => {
    // 销毁之前的图表
    chart.value = markRaw(echarts.init(chart.value));
    chart.value.setOption(option);
    creatChart.value = true
  }, 100);
}


onMounted(() => {
  setBloodCharts()
  setBloodCharts1()
})


defineExpose({
  getData,
  clearData
})

</script>

<style scoped lang="scss">

</style>
